<template>
<div>
	<el-card class="box-card" style="margin-bottom: 20px;" v-for="(field,index) in fields" v-if="field.type_name=='文件'" :key="index">
	  <div slot="header" class="clearfix" style="text-align: center;">
	    <span>{{field.ch_name}}</span>
	  </div>
	  <div class="text item">
	    <el-upload
	    	multiple
	    	:data="data"
	    	:headers="headers"
	    	:before-upload="(file,fileList)=>beforeUpload(file,fileList,field)"
	    	:before-remove="(file,fileList)=>removeFile(file,fileList,field)"
			  class="upload-demo"
			  :action="upload_url"
			  :on-success="upSuccess"
			  :accept="fileAccept"
			  :file-list="fileList[field.en_name]">
			  <el-button slot="trigger" size="small" type="primary">上传文件</el-button>
			</el-upload>
	  </div>
	</el-card>
	<el-card class="box-card" v-for="(field,index) in fields" v-if="field.type_name=='图片'" :key="index">
	  <div slot="header" class="clearfix" style="text-align: center;">
	    <span>{{field.ch_name}}</span>
	  </div>
	  <div class="text item">
	    <el-upload
			  list-type="picture-card"
			  :data="data"
			  :headers="headers"
			  :before-upload="(file,fileList)=>beforeUpload(file,fileList,field)"
			  :before-remove="(file,fileList)=>removeFile(file,fileList,field)"
			  :action="upload_url"
			  :on-success="upSuccess"
			  :on-preview="handlePreview"
			  :accept="imgAccept"
			  :file-list="fileList[field.en_name]">
			  <i class="el-icon-plus"></i>
			</el-upload>
	  </div>
	</el-card>

	<el-dialog :visible.sync="dialogVisible" append-to-body>
		<img width="100%" :src="dialogImageUrl">
	</el-dialog>
</div>
</template>
<script>
import {getAPItokenRes,deleteAPItoken} from '@/utils/api'
export default {
	props: {
		fields:Array,
		instance:Number
	},
	data () {
		return {
			headers: {
        'Authorization': 'Token ' + this.$store.state.user.token
      },
			upload_url:API.instUpload,
			fileList: {},
			dialogImageUrl: '',
			dialogVisible: false,
			data:{},
			imgAccept: '.jpg,.jpeg,.png,.gif,.bmp,.JPG,.JPEG,.PBG,.GIF,.BMP',
			fileAccept: '.doc,.docx,.pdf,.zip,.xls,.xlsx,.DOC,.DOCX,.PDF,.ZIP,.XLS,.XLSX'
		}
	},
	methods: {
		handlePreview (file) {
			this.dialogImageUrl = file.url
  		this.dialogVisible = true
		},
		upSuccess (response, file, fileList) {
			file['id'] = response.id
			this.$emit('getProjects')
		},
		delFile (id,type_name,fileList) {
			var type_dict = {
				'图片': 'image',
				'文件': 'file'
			}
			const promise = deleteAPItoken(API.instUpload+id+'/?type='+type_dict[type_name],this.$store.state.user.token)
			promise.then((res)=>{
				if (res.status) {
					this.$emit('getProjects')
					fileList.forEach((v,i)=>{
						if(v.id==id){
							fileList.splice(i,1)
						}
					})
					this.$message({
            type: 'success',
            message: '删除成功!'
          })
				} else {
					this.$message({
            type: 'error',
            message: '删除失败!, '+res.data
          })
				}
			})
		},
		removeFile (file,fileList,field) {
			if (file.status === 'success'){
				this.$confirm('删除'+file.name+', 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
        	this.delFile(file.id,field.type_name,fileList)
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
          return false    
        })
      } 
			return false
		},
		beforeUpload (file,fileList,field) {
			this.data['instance'] = this.instance
			this.data['field_type'] = field.type
			this.data['field_en_name'] = field.en_name
		},
		getFiles () {
			const promise = getAPItokenRes(API.instUpload+'?instance='+this.instance,this.$store.state.user.token)
			promise.then((res)=>{
				this.fileList = res.data
			})
		}
	},
	mounted () {
		this.getFiles()
	}
}
</script>